* {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-user-select: none;
    font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "STHeitiSC-Light", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
i {
    font-style:normal;
    color: #FF5442 ;
}
body, html {
    width: 100%;
    height: 100%;
}

:global #main {
    width: 100%;
    height: 100%;
}

.all {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.box {
    width: 750rpx;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: #6440FD;
    font-size: 24rpx;
    color: #8AFFE5;
}
.banner {
    width: 750rpx;
    height: 750rpx;
    background: url('../image/banner.png') no-repeat center;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box .activeWrap {
    width: 680rpx;
    height: auto;
    padding: 60rpx 20rpx;
    box-sizing: border-box;
    border-radius: 30rpx;
    margin: auto;
    position: relative;
}
.activeTime {
  width: 672rpx;
  height: 306rpx;
  background: url("../image/state2.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
}
.activeState {
  width: 648rpx;
  height: 194rpx;
  background: url("../image/state1.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
  margin-top: 60rpx;
}
.swipeKing {
  width: 682rpx;
  margin: 0rpx auto;
}
.swipeTitle1 {
  width: 682rpx;
  height: 160rpx;
  background: url("../image/king1.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
}
.swipeTitle2 {
  width: 682rpx;
  height: 160rpx;
  background: url("../image/king2.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
}
.swipeTitle3 {
  width: 682rpx;
  height: 160rpx;
  background: url("../image/king3.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
}
.swipeTitle4 {
  width: 682rpx;
  height: 214rpx;
  background: url("../image/king4.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
}
.kingWrap {
  color: #ffffff;
  width: 100%;
  height: 534rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.kingWrap .left {
  width: 28rpx;
  height: 54rpx;
  background: url("../image/left.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
  align-self: center;
}
.kingWrap .right_1 {
  width: 28rpx;
  height: 54rpx;
  background: url("../image/right.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
  align-self: center;
}
.kingWrap .king1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 138rpx;
  text-align: center;
}

.kingWrap .king1 .kings {
  width: 138rpx;
  height: 172rpx;
  margin: 20rpx 0;
  background: url("../image/1.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
}
.kingWrap .king1 .kings2 {
  width: 138rpx;
  height: 172rpx;
  margin: 20rpx 0;
  background: url("../image/3.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
}

.kingicon {
  width: 120rpx;
  height: 120rpx;
  border: 2px solid #ffffff;
  border-radius: 50%;
  position: relative;
  /*background: url("../image/default.png") no-repeat center;*/
  /*-webkit-background-size: 100%;*/
  /*background-size: 100%;*/
}

.kingicon img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.king2 .kingicon {
  width: 140rpx;
  height: 140rpx;
  border: 2px solid #ffffff;
  border-radius: 50%;
  position: relative;
}

.king2 .kingicon img {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}
i {
  position: absolute;
  bottom: -24rpx;
  left: 50%;
  margin-left: -9rpx;
  width: 0rpx;
  height: 0rpx;
  border: 10rpx solid transparent;
  border-top:14rpx solid white;
}
.kingWrap  .text {
  line-height: 40rpx;
}
.kingWrap .king2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 172rpx;
  text-align: center;
}
.kingWrap .king2 .kings {
  width: 172rpx;
  height: 214rpx;
  margin: 20rpx 0;
  background: url("../image/2.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
}


.rankWrap {
  width: 682rpx;
  margin: 40rpx auto;
}
.rankTitle{
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
}
.rankTitle div{
  width: 316rpx;
  height: 102rpx;

}
.rankTitle .left {
  background: url("../image/loveH.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
}
.rankTitle ._left {
  background: url("../image/loveS.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
}
.rankTitle .right {
  background: url("../image/gourage.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
}
.rankTitle ._right {
  background: url("../image/gourage1.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
}

.rankList .list {
  width: 100%;
  height: 128rpx;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
}
.list .listHead {
  width: 128rpx;
  height: 128rpx;
  background-color: #FD21D1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rankList .list .listHead .listNo {
  width: 62rpx;
  height: 36rpx;
  background: url('../image/no1.png') no-repeat center;
  background-size: 100%;
}
.rankList .list .listNo1 {
  width: 62rpx;
  height: 36rpx;
  background: url('../image/no2.png') no-repeat center;
  background-size: 100%;
}
.rankList .list .listNo2 {
  width: 62rpx;
  height: 36rpx;
  background: url('../image/no3.png') no-repeat center;
  background-size: 100%;
}
.rankList .list .listNo3 {
  color: #ffffff;
  font-size: 50rpx;
  margin-right: 17rpx;
  text-align: center;
  line-height: 128rpx;
  font-weight: bold;
}
.itemHeader{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  /*overflow: hidden;*/
  position: relative;
  margin: 0 20rpx;
}

.rankList .list .listImg {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 1px solid #FFB2B2;
}
.rankList .list .listName {
  width: 150rpx;
  line-height: 110rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 30rpx;
  color: #4C24F6 ;
}
.rankList .list .listNum{
  font-weight: bold;
  font-size: 36rpx;
  color: #4C24F6;
}
.stateText {
  margin-bottom: 40rpx;
}
.award {
  width: 678rpx;
  margin: 60rpx auto 0;
}
.awardState {
  width: 678rpx;
  height: 1212rpx;
  background: url("../image/award.png") no-repeat center;
  -webkit-background-size: 100%;
  background-size: 100%;
}
.award .state {
  font-size: 30rpx;
  color: #FFFFFF;
  line-height: 120rpx;
  text-align: center;
}
.text {
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.itemLive{
  width: 58rpx;
  height: 20rpx;
  background-image: url(../image/live.png);
  background-size: 100%;
  position: absolute;
  bottom: 0px;
  right: 0px;
}

